<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/liMarquee.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部盒子 -->
    <header>

        <!-- 二级地区框 -->
        <select onchange="add_station_id()" id="city">
            <option value="hz">杭州</option>
            <option value="fy">富阳</option>
            <option value="lz">湖州</option>
            <option value="jx">嘉兴</option>
            <option value="jh">金华</option>
            <option value="yw">义乌</option>
            <option value="ls">丽水</option>
            <option value="nb">宁波</option>
            <option value="qz">衢州</option>
            <option value="sx">绍兴</option>
            <option value="tz">台州</option>
            <option value="wz">温州</option>
            <option value="zs">舟山</option>

        </select>
        <select id="station_id">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
            <option value="">11</option>
            <option value="">12</option>
            <option value="">13</option>
        </select>

        <!-- 选择时间 -->
        <input type="text" id="selectTime" placeholder="请选择查询时间">

        <!-- 查询按钮 -->
        <button id="chaxun">查询</button>

        <h1>空气质量数据可视化展板</h1>
        <div class="showTime"></div>
    </header>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    <!-- 页面主体部分 -->
    <section class="mainbox">
        <!-- 左边列 -->
        <div class="column">
            <div class="panel bar1">
                <h2>当前污染物含量</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie1">
                <h2>污染物占比</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel tab1">
                <h2>
                    6h预警信息
                </h2>
                <div class="chart">
                    <div class="dowebok2">
                        <table>
                            <tbody id="tbody1">
                                <tr>
                                    <td>2017-04-30 16:00</td>
                                    <td>NO2</td>
                                    <td>134</td>
                                    <td>16</td>
                                </tr>
                                <tr>
                                    <td>2017-04-30 16:00</td>
                                    <td>SO2</td>
                                    <td>22</td>
                                    <td>10</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <!-- 中间列 -->
        <div class="column">
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>412346</li>
                        <li>428649</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>在线中</li>
                        <li>设备总数</li>
                    </ul>
                </div>
            </div>
            <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">地图模块</div>
                <button onclick="window.open('region.html')">查询更多</button>
            </div>
        </div>
        <!-- 右边列 -->
        <div class="column">
            <div class="panel line2">
                <h2>六小时污染监测</h2>
                <div class="chart"></div>
                <button onclick="window.open('line.html')">查询更多</button>
                <div class="panel-footer"></div>
            </div>
            <div class="panel tab2">
                <h2>
                    <div>Time</div>
                    <div>AQI</div>
                    <div>CO</div>
                    <div>NO2</div>
                    <div>O3</div>
                    <div>PM10</div>
                    <div>PM25</div>
                    <div>SO2</div>
                </h2>
                <div class="chart">
                    <div class="dowebok">
                        <table>
                            <tbody id="tbody2">
                                <tr>
                                    <td>0：00</td>
                                    <td>100</td>
                                    <td>1.2</td>
                                    <td>134</td>
                                    <td>23</td>
                                    <td>137</td>
                                    <td>75</td>
                                    <td>22</td>
                                </tr>
                                <tr>
                                    <td>1：00</td>
                                    <td>102</td>
                                    <td>1.3</td>
                                    <td>133</td>
                                    <td>24</td>
                                    <td>135</td>
                                    <td>74</td>
                                    <td>25</td>
                                </tr>
                                <tr>
                                    <td>2：00</td>
                                    <td>103</td>
                                    <td>1.4</td>
                                    <td>132</td>
                                    <td>22</td>
                                    <td>125</td>
                                    <td>73</td>
                                    <td>24</td>
                                </tr>
                                <tr>
                                    <td>3：00</td>
                                    <td>100</td>
                                    <td>1.2</td>
                                    <td>134</td>
                                    <td>23</td>
                                    <td>137</td>
                                    <td>75</td>
                                    <td>22</td>
                                </tr>
                                <tr>
                                    <td>4：00</td>
                                    <td>102</td>
                                    <td>1.3</td>
                                    <td>133</td>
                                    <td>24</td>
                                    <td>135</td>
                                    <td>74</td>
                                    <td>25</td>
                                </tr>
                                <tr>
                                    <td>5：00</td>
                                    <td>103</td>
                                    <td>1.4</td>
                                    <td>132</td>
                                    <td>22</td>
                                    <td>125</td>
                                    <td>73</td>
                                    <td>24</td>
                                </tr>
                                <tr>
                                    <td>6：00</td>
                                    <td>100</td>
                                    <td>1.2</td>
                                    <td>134</td>
                                    <td>23</td>
                                    <td>137</td>
                                    <td>75</td>
                                    <td>22</td>
                                </tr>
                                <tr>
                                    <td>7：00</td>
                                    <td>102</td>
                                    <td>1.3</td>
                                    <td>133</td>
                                    <td>24</td>
                                    <td>135</td>
                                    <td>74</td>
                                    <td>25</td>
                                </tr>
                                <tr>
                                    <td>8：00</td>
                                    <td>103</td>
                                    <td>1.4</td>
                                    <td>132</td>
                                    <td>22</td>
                                    <td>125</td>
                                    <td>73</td>
                                    <td>24</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="panel-footer"></div>
            </div>
            <div class="panel pie2">
                <h2>传感器地区分布情况</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

        </div>

    </section>

    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.liMarquee.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/laydate/laydate.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>